import React, { Component } from 'react';
import {getClassify,productList} from '../../api/classify';

class Classify extends Component {
    state = {
        classify:[],     //分类
        productList:[]   //商品的列表
    }

    componentDidMount(){
        getClassify().then(res => {
            if(res.data.code === 1){
                this.setState({
                    classify:res.data.data
                },() => {
                    this.getProductList(this.state.classify[0].id)
                })
            }
        })
    }

    //获取对应的商品列表
    getProductList = (classify_id) => {
        productList({classify_id}).then(res => {
            if(res.data.code === 1){
                this.setState({
                    productList:res.data.data
                })
            }    
        })
    }
    render() {
        let {classify,productList} = this.state;

        return (
            <div className="classify">
                <div className="left">
                    <ul>
                        {classify.map(item => <li key={item.id} onClick={() =>this.getProductList(item.id)}>{item.classify_name}</li>)}
                    </ul>
                </div>
                <div className="right">
                    <div>
                        {productList.map(item => <dl key={item.id} onClick={()=> this.goDetail(item.id)}>
                           <dt>
                                <img src={item.pic} alt=""/>
                            </dt> 
                            <dd>
                                <h6>{item.title}</h6>
                                <div>
                                    <span>{item.con}</span>
                                    <span>{item.price}</span>
                                </div>
                            </dd>
                        </dl>)}
                        
                    </div>
                </div>
            </div>
        );
    }
    //跳详情
    goDetail = (id) => {
        this.props.history.push(`/detail/${id}`)
    }
}

export default Classify;